<template>
  <div class="hello" style="padding: 5%;">
    <div style="display: flex;justify-content: space-around;margin: 5% 0;">
      <van-button type="warning">导出待审核</van-button>
      <van-button type="warning">导出已生效清单</van-button>
    </div>

    <div style="display: flex;justify-content: space-around;">
      <van-button @click="processPic('discount')" type="info">服务卡流程图</van-button>
      <van-button @click="processPic('greenCard')" type="info">大单优惠流程图</van-button>
      <van-button @click="processPic('service')" type="info">绿卡流程图</van-button>
    </div>
    <div>
      <div style="margin-top:30px;margin-bottom:20px;font-size:34px;font-weight: bold;">金牌服务更新通告</div>
      <div v-for="item in announcement" :key="item.id" style="background-color:#eee;padding: 30px ;border-radius: 15px;margin-bottom: 5px;">
        <div style="display:flex;">{{ formatDate(item.createTime) }}</div>
        <van-divider  :style="{ color: '#1989fa', borderColor: '#1989fa' }"/>
        <div class="html" style="display:flex; flex-direction: column; align-items: flex-start;font-size: 20px;font-weight: 700;" v-html="item.announcement" />
      </div>
    </div>
    <van-image-preview v-model="show" :images="images">
      <template v-slot:index>第{{ index }}页</template>
    </van-image-preview>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import discount from '@/assets/img/discount.png'; 
import greenCard from '@/assets/img/greenCard.png'; 
import service from '@/assets/img/service.png'; 
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      show: false,
      index: 0,
      imageMap: {
        discount,
        greenCard,
        service
      },
      images: [],
      announcement:[{
        announcement:'123',
        createTime:"2024-08-12 09:21:57",
        modifyTime: "2024-08-12 09:21:57",
        shortAnnouncement:'345'
      }]
    }
  },
  methods: {
    processPic(name) {
      console.log('name', name);
      const image = this.imageMap[name];
      if (image) {
        this.images = [image];
        ImagePreview(this.images);
      } else {
        console.warn(`未找到名为 ${name} 的图片资源`);
      }
    },
    formatDate(time) {
      // 格式化时间为 YYYY-MM-DD HH:MM:SS
      var date = new Date(time)
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      // var hours = date.getHours()
      // var minutes = date.getMinutes()
      // var seconds = date.getSeconds() // 判断是不是小于10 返回01 02 03
      function check(num) {
        if (num < 10) {
          // 如果数字小于10,前边拼接个0
          return '0' + num
        } else {
          return num
        }
      }
      const timeArry = {}
      const timeText = `${check(year)}年${check(month)}月${check(day)}日 ` // ${check(hours)}: ${check(minutes)}: ${check(seconds)}
      // const nowDay = date.getDay()
      // const weeks = new Array(
      //   '星期日',
      //   '星期一',
      //   '星期二',
      //   '星期三',
      //   '星期四',
      //   '星期五',
      //   '星期六'
      // )
      // const week = weeks[nowDay] // let state = ``; // // 判断当前时间段 // if (hours >= 0 && hours <= 10) { //   state = `早上`; // } else if (hours > 10 && hours <= 14) { //   state = `中午`; // } else if (hours > 14 && hours <= 18) { //   state = `下午`; // } else if (hours > 18 && hours <= 24) { //   state = `晚上`; // }
      timeArry.timeText = timeText
      // timeArry.week = week // timeArry.state = state;
      return timeArry.timeText // 时间展示 // return ` //         ${check(year)}年 //         ${check(month)}月 //         ${check(day)}日 //         ${check(hours)} : //         ${check(minutes)} : //         ${check(seconds)}`;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
